<template>
  <div class="pageOut">
    <div class="Home">
      <div class="logo-title">
        <el-row>
          <el-col :span="1.5">
            <img class="logo" :src="logoimg" alt />
          </el-col>
          <el-col :span="2.5">
            <h2 class="s-h3">设备数据管理</h2>
          </el-col>
          <el-col :span="1.5">
            <div class="general">
              <span class="general-img"></span>
              <span class="general-text">项目概况</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 运营栏 -->
      <div class="operation">
        <div class="op-left">
          <h3>运营概览</h3>
          <!-- <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeData"
          ></el-date-picker>-->
        </div>
        <div class="op-right">
          <h3>服务压力地图</h3>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="hr"></div>
      <!-- 数据栏 -->
      <div class="content">
        <!-- 左边数据列表 -->
        <div class="cardData">
          <div class="date-row">
            <div class="num-t">
              <b>{{ leftData.all == null ? "0" : leftData.all }}</b>
              <span>台</span>
            </div>
            <div class="separate"></div>
            <div class="facility-data">
              <div class="fa-text">设备总台数</div>
              <div class="fa-arrows" v-if="leftData.all_percent < 1">
                <span class="img-a img-b"></span>
                <span class="fa-color"
                  >{{
                    leftData.all_percent == null
                      ? " 暂无数据 "
                      : (leftData.all_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
              <div class="fa-arrows" v-else>
                <span class="img-a"></span>
                <span
                  >{{
                    leftData.all_percent == null
                      ? " 暂无数据 "
                      : (leftData.all_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>
          </div>
          <div class="date-row">
            <div class="num-t">
              <b>{{ leftData.common == null ? "0" : leftData.common }}</b>
              <span>台</span>
            </div>
            <div class="separate"></div>

            <div class="facility-data" v-if="leftData.common_percent < 1">
              <div class="fa-text">当前正常设备台数</div>
              <div class="fa-arrows">
                <span class="img-a img-b"></span>
                <span class="fa-color"
                  >{{
                    leftData.common_percent == null
                      ? "暂无数据"
                      : (leftData.common_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>

            <div class="facility-data" v-else>
              <div class="fa-text">当前正常设备台数</div>
              <div class="fa-arrows">
                <span class="img-a"></span>
                <span
                  >{{
                    leftData.common_percent == null
                      ? "暂无数据"
                      : (leftData.common_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>
          </div>
          <div class="date-row">
            <div class="num-t">
              <b>{{ leftData.warning == null ? "0" : leftData.warning }}</b>
              <span>次</span>
            </div>
            <div class="separate"></div>
            <div class="facility-data" v-if="leftData.warning_percent < 1">
              <div class="fa-text">当前设备告警台数</div>
              <div class="fa-arrows">
                <span class="img-a img-b"></span>
                <span class="fa-color"
                  >{{
                    leftData.warning_percent == null
                      ? "暂无数据"
                      : (leftData.warning_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>

            <div class="facility-data" v-else>
              <div class="fa-text">当前设备告警台数</div>
              <div class="fa-arrows">
                <span class="img-a"></span>
                <span
                  >{{
                    leftData.warning_percent == null
                      ? "暂无数据"
                      : (leftData.warning_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>
          </div>
          <div class="date-row">
            <div class="num-t">
              <b>{{ leftData.offline == null ? "0" : leftData.offline }}</b>
              <span>次</span>
            </div>
            <div class="separate"></div>

            <div class="facility-data" v-if="leftData.offline_percent < 1">
              <div class="fa-text">当前设备离线台数</div>
              <div class="fa-arrows">
                <span class="img-a img-b"></span>
                <span class="fa-color"
                  >{{
                    leftData.offline_percent == null
                      ? "暂无数据"
                      : (leftData.offline_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>

            <div class="facility-data" v-else>
              <div class="fa-text">当前设备离线台数</div>
              <div class="fa-arrows">
                <span class="img-a "></span>
                <span
                  >{{
                    leftData.offline_percent == null
                      ? "暂无数据"
                      : (leftData.offline_percent * 100).toFixed(2)
                  }}%&nbsp;相比上月</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 中间地球图 -->
        <div class="echartsData">
          <Echarts />
        </div>
        <!-- 设备数据 -->
        <div class="tabData">
          <el-tabs
            class="right-tab"
            v-model="activeName"
            width="500px"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="'告警设备数' + '(' + warningCount + ')'"
              name="1"
            >
              <el-row v-for="(item, index) in warningDeviceList" :key="index">
                <div class="row-1">
                  <span class="col-1" style="width:140px">{{
                    item.storeAddress
                  }}</span>
                  <span class="col-2" style="font-size:14px;">
                    <b>{{ item.warning }}</b> 台
                  </span>
                  <div class="fa-arrows" style="font-size:14px;">
                    <span class="img-a img-b"></span>
                    <span style="color: #e6492d;"
                      >{{ item.warning_percent * 100 }}%&nbsp;相比上月</span
                    >
                  </div>
                </div>
                <div class="hr-2"></div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane
              :label="'离线设备数' + '(' + offLineCount + ')'"
              name="2"
            >
              <el-row v-for="(item, index) in offLineDeviceList" :key="index">
                <div class="row-1">
                  <span class="col-1" style="font-size:14px;width:140px">{{
                    item.storeAddress
                  }}</span>
                  <span class="col-2" style="font-size:14px;">
                    <b>{{ item.offline }}</b> 台
                  </span>
                  <div class="fa-arrows" style="font-size:14px;">
                    <span class="img-a img-b"></span>
                    <span style="color: #e6492d;"
                      >{{ item.offline_percent * 100 }}%&nbsp;相比上月</span
                    >
                  </div>
                </div>
                <div class="hr-2"></div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          <div class="d-nav">
            <ul id="activeUl">
              <li :data-active="1" class="active-li"></li>
              <li :data-active="2"></li>
            </ul>
          </div>
          <!--  -->
          <div class="data-btm">
            <div class="inform">
              <el-badge :value="num" class="item">消息通知</el-badge>
            </div>
            <div class="infore-data">
              <ul class="blick-ul">
                <li>
                  <img src="../assets/images/ly/ic- she-1.png" />
                  <span
                    >工单编号：
                    <!-- homeData.workOrderNumber == null
                        ? "暂无数据"
                        : -->
                    {{
                      homeData.workOrderNumber == null
                        ? "暂无数据"
                        : homeData.workOrderNumber
                    }}</span
                  >
                </li>
                <li>
                  <img src="../assets/images/ly/ic- she-1.png" />
                  <span
                    >工单类型：{{
                      homeData.name == null ? "暂无数据" : homeData.name
                    }}</span
                  >
                </li>
                <li>
                  <img src="../assets/images/ly/ic- she-1.png" />
                  <span
                    >告警时间：{{
                      homeData.add_time == null ? "暂无数据" : homeData.add_time
                    }}</span
                  >
                </li>
                <li>
                  <img src="../assets/images/ly/ic- she-1.png" />
                  <span style="line-height:30px"
                    >告警内容：{{
                      homeData.content == null ? "暂无数据" : homeData.content
                    }}</span
                  >
                </li>
              </ul>
              <!-- - -->
              <ul class="therr-ul">
                <li class="clearfix">
                  <el-row>
                    <el-col :span="14">
                      <div class="left">
                        <img src="../assets/images/ly/ic- she-1.png" />
                        <el-tooltip
                          :content="homeData.deviceNumber"
                          placement="top"
                        >
                          <span
                            >设备编号：{{
                              homeData.deviceNumber == null
                                ? "暂无数据"
                                : homeData.deviceNumber | ellipsis
                            }}</span
                          >
                        </el-tooltip>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <div class="right">
                        <img src="../assets/images/ly/ic- she-1.png" />
                        <el-tooltip
                          :content="homeData.device_name"
                          placement="top"
                        >
                          <span
                            >设备名称：{{
                              homeData.device_name == null
                                ? "暂无数据"
                                : homeData.device_name | ellipsis
                            }}</span
                          >
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                </li>
                <li class="clearfix">
                  <el-row>
                    <el-col :span="14">
                      <div class="left">
                        <img src="../assets/images/ly/ic- she-1.png" />
                        <span
                          >设备类型：{{
                            homeData.type_name == null
                              ? "暂无数据"
                              : homeData.type_name
                          }}</span
                        >
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <div class="right">
                        <img src="../assets/images/ly/ic- she-1.png" />
                        <el-tooltip
                          :content="homeData.model_name"
                          placement="top"
                        >
                          <span
                            >设备型号：{{
                              homeData.model_name == null
                                ? "暂无数据"
                                : homeData.model_name | ellipsis
                            }}</span
                          >
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <img src="../assets/images/ly/ic- she-1.png" />
                  <!-- {{homeData[0].storeName}} -->
                  <span
                    >所属分支：{{
                      homeData.projectName == null
                        ? "暂无项目"
                        : homeData.projectName
                    }}/{{
                      homeData.groupName == null
                        ? "暂无组"
                        : homeData.groupName
                    }}/{{
                      homeData.storeName == null
                        ? "暂无门店"
                        : homeData.storeName
                    }}</span
                  >
                </li>
              </ul>
            </div>
            <!-- 工单详情 -->
            <div class="work-data">
              <img
                @click="subtract"
                src="../assets/images/ly/arrows-left.png"
                alt
                class="left-arrows"
              />
              <img
                @click="plus"
                src="../assets/images/ly/arrows-right.png"
                alt
                class="right-arrows"
              />
            </div>
          </div>
          <!-- <div class="pagination" style="margin-bottom:20px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[1]"
              :page-size="ruleForm.pageSize"
              :current-page="ruleForm.pageNumber"
              layout="total, sizes, prev, pager, next, jumper"
              :total="num"
              class="management_page"
            ></el-pagination>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  homeList,
  homeDeviceCount,
  homeAddressDevice,
  joinGroup
} from "../utils/api";
import Echarts from "./Echarts";
import { mapState, mapGetters } from "vuex";
export default {
  name: "Home",
  inject: ["handlergetWarningListSimple", "showtost3"],
  data() {
    return {
      dateValue: "",
      cascaderValue: "",
      activeName: "1",
      pageSize: 1,
      pageNumber: 1,
      homeData: {},
      start_time: "",
      end_time: "",
      address: "",
      // 左侧数据
      leftData: [],

      // 告警列表
      warningDeviceList: [],
      // 离线列表
      offLineDeviceList: [],
      num: 0,
      websocket: null,
      warningCount: "",
      offLineCount: "",
      logoimg: ""
    };
  },
  // 当文字大于6的时候添加省略号
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 6) {
        return value.slice(0, 6) + "...";
      }
      return value;
    }
  },
  components: {
    Echarts
  },
  methods: {
    getDataInit() {
      this.showtost3();
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
        // this.LockersList = [];
        // this.$message.error("暂无数据");
      } else {
        this.gethomeAddressDevice();

        this.gethomeDeviceCount();
        this.getHomeDate();
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      // 获取所有li
      let liAll = document.querySelectorAll("#activeUl>li");
      // console.log(liAll);
      // 遍历
      liAll.forEach(v => {
        // 去掉所有li上的active-li 类名
        v.classList.remove("active-li");
        // 获取li上的自定义属性
        let dataActive = v.getAttribute("data-active");
        // console.log(dataActive);
        if (this.activeName == dataActive) {
          v.className = "active-li";
        }
      });
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.getNoworkOrder();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNumber = val;
      this.getNoworkOrder();
    },
    // 获取首页工单列表数据
    getHomeDate(pageNumber) {
      this.postRequest(homeList, {
        pageSize: this.pageSize,
        pageNumber: pageNumber || this.pageNumber,
        companyId: this.org_id
      }).then(res => {
        if (res.code == 200) {
          if (res.data.data.length != 0) {
            this.homeData = res.data.data[0];
          }
          this.num = res.data.count || 0;
        }
      });
    },
    plus() {
      if (this.pageNumber == this.num) {
        this.$notify.info("当前已经是最后一条工单信息");
        return false;
      }
      this.pageNumber = this.pageNumber + 1;
      this.getHomeDate(this.pageNumber);
    },
    subtract() {
      if (this.pageNumber == 1) {
        this.$notify.info("当前已是最新工单信息");
        return;
      }
      this.pageNumber = this.pageNumber - 1;
      this.getHomeDate(this.pageNumber);
    },
    // 获取设备总数据和设备正常数据--左侧
    gethomeDeviceCount() {
      this.postRequest(homeDeviceCount, { companyId: this.org_id }).then(
        res => {
          // console.log(res);
          if (res.code == 200) {
            this.leftData = res.data;
          }
        }
      );
    },
    // 获取右侧数据
    gethomeAddressDevice() {
      this.postRequest(homeAddressDevice, { companyId: this.org_id }).then(
        res => {
          // console.log(res);
          if (res.code == 200) {
            this.warningDeviceList = res.data[0];
            this.offLineDeviceList = res.data[2];
            this.warningCount = res.data[1];
            this.offLineCount = res.data[3];
          }
        }
      );
    },
    // 获取首页离线设备数据
    // gethomeOffLineDevice() {
    //   const params = {
    //     start_time: this.start_time,
    //     end_time: this.end_time,
    //     address: this.address
    //   };

    //   this.postRequest(homeOffLineDevice, params).then(res => {
    //     if (res.code == 200) {
    //       if (res.data.length == 0) {
    //         this.offLineDeviceData.num = 0;
    //       } else {
    //         this.offLineDeviceData = res.data.count;
    //         this.offLineDeviceList = res.data.data;
    //       }
    //     }
    //   });
    // },
    // 获取首页告警设备数据
    // gethomeWarningDevice() {
    //   this.postRequest(homeWarningDevice, {
    //     start_time: this.start_time,
    //     end_time: this.end_time,
    //     address: this.address
    //   }).then(res => {
    //     if (res.code == 200) {
    //       if (res.data.length == 0) {
    //         this.warningDeviceData.num = 0;
    //       } else {
    //         this.warningDeviceData = res.data.count;
    //         this.warningDeviceList = res.data.data;
    //       }
    //     }
    //   });
    // },
    // 地区搜索
    searchAdd() {
      this.gethomeWarningDevice();
      this.gethomeOffLineDevice();
    },
    // 根据时间区域搜索
    changeData(val) {
      console.log(val);
      this.start_time = val[0];
      this.end_time = val[1];
      this.searchAdd();
    },
    websocketTest() {
      //初始化websocket
      // var url="ws://123.207.89.57:8282";
      // var url = "ws://47.99.74.117:8002";
      var url = "wss://tcp.wadd.vip/wss";

      this.websocket = new WebSocket(url);
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      // this.websocket.onclose = this.websocketclose;
    },
    websocketonopen() {
      console.log("连接成功");
      var data = {
        type: "login",
        device_id: "SWE16081"
      };
      var arr = JSON.stringify(data);
      this.websocket.send(arr);
      // this.heatBeat();
    }, //连接成功
    websocketonerror() {
      console.log("连接失败");
      this.reconnect();
    }, //连接失败
    websocketclose() {
      console.log("断开连接");
      this.reconnect();
    },
    websocketonmessage(data) {
      console.log(data);

      if (JSON.parse(data["data"])["type"] == "tp5") {
        //调接口
        this.getHomeDate(this.pageNumber);
      }
      if (JSON.parse(data["data"])["type"] == "login") {
        const aa = JSON.parse(data["data"])["client_id"];
        window.sessionStorage.setItem("clientId", aa);
        //调接口
        this.postRequest(joinGroup, {
          client_id: JSON.parse(data["data"])["client_id"]
        }).then(res => {});
      }
      if (JSON.parse(data["data"])["type"] == "report") {
        //调接口
        this.handlergetWarningListSimple();
      }

      //收到消息会刷新心跳检测，如果一直收到消息，就推迟心跳发送
      this.heatBeat();
    }, //数据接收
    websocketsend(data) {
      // this.websocket.send(JSON.stringify(data));
      this.websocket.send(data);
    },
    reconnect() {
      // if(this.lockReconnect){       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
      //     return
      // }
      // this.lockReconnect = true;
      // this.reconnectData && clearTimeout(this.reconnectData);
      // this.reconnectData = setTimeout(()=>{
      //     this.initWebSocket();
      //     this.lockReconnect = false;
      // },5000)
    },
    heatBeat() {
      // this.timeoutObj && clearTimeout(this.timeoutObj);
      // this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      // this.timeoutObj = setTimeout(()=>{
      //     this.websocketsend({type:'心跳检测'})   //根据后台要求发送
      //     this.serverTimeoutObj = setTimeout(()=> {
      //         this.websock.close();       //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
      //     }, 5000);
      // }, this.timeout)
    },
    destroyed() {
      // this.lockReconnect = true;
      // this.websock.close()                   //离开路由之后断开websocket连接
      // clearTimeout(this.reconnectData);      //离开清除 timeout
      // clearTimeout(this.timeoutObj);         //离开清除 timeout
      // clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
    }
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.gethomeAddressDevice();
      this.getHomeDate();
      this.gethomeDeviceCount();
      this.logoimg = window.sessionStorage.getItem("logoimg");
    }
  },
  created() {
    this.getDataInit();
    if (window.sessionStorage.getItem("logoimg") == null) {
      this.logoimg = JSON.parse(window.sessionStorage.getItem("userInfo")).logo;
      window.sessionStorage.setItem("logoimg", this.logoimg);
    } else {
      this.logoimg = window.sessionStorage.getItem("logoimg");
    }

    // if (
    //   window.sessionStorage.getItem("clientId") == "" ||
    //   window.sessionStorage.getItem("clientId") == null
    // ) {
    //   this.websocketTest();
    // }
  }
};
</script>

<style lang="less" scoped>
.Home {
  margin-left: 30px;
  margin-right: 20px;
  padding-bottom: 100px;
  .logo-title {
    width: 100%;
    height: 40px;
    padding-top: 40px;
    margin-bottom: 40px;
    .logo {
      height: 80px;
      width: 150px;
      margin-right: 6px;
      margin-top: -20px;
    }
    .s-h3 {
      margin-top: 8px;
      margin-right: 10px;
    }
    .general {
      width: 71px;
      height: 20px;
      background: rgba(0, 119, 248, 1);
      opacity: 1;
      border-radius: 4px;
      text-align: right;
      margin-top: 8px;
      .general-img {
        display: inline-block;
        width: 11px;
        height: 10px;
        background-image: url(../assets/images/ly/xmgk.png);
      }
      .general-text {
        width: 48px;
        height: 16px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 18px;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
        margin-right: 3px;
      }
    }
  }
  .hr {
    height: 1px;
    width: 100%;
    border-top: solid 1px rgba(234, 237, 243, 1);
  }
  .operation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 96%;
    .op-left,
    .op-right {
      width: 40%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .op-right {
      width: 35%;
    }
    h3 {
      margin-top: 10px;
      margin-bottom: 40px;
    }
  }
  .map-h3 {
    margin-left: 240px;
    margin-right: 180px;
  }
  .content {
    display: flex;
    flex-direction: row;
    .cardData {
      width: 20%;
      padding-top: 30px;
      .date-row {
        margin-bottom: 20px;
        // width: 85%;
        height: 80px;
        background: rgba(255, 255, 255, 0);
        border: 1px solid rgba(234, 237, 243, 1);
        opacity: 1;
        border-radius: 4px;
        line-height: 80px;
        // padding-left: 15px;
        padding: 2px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        span {
          font-size: 13px;
        }
        .separate {
          width: 1px;
          height: 38px;
          background: rgba(234, 237, 243, 1);
          opacity: 1;
        }
        .facility-data {
          line-height: 25px;
          .fa-arrows {
            position: relative;
            margin-left: 17px;
            .fa-color {
              color: #e6492d;
            }
            .img-a {
              display: block;
              position: absolute;
              top: 6px;
              left: -16px;
              height: 14px;
              width: 14px;
              background-image: url(../assets/images/ly/goup2x.png);
              background-repeat: no-repeat;
              background-position: 0px 0px;
              background-size: 14px;
            }
            .img-b {
              background-image: url(../assets/images/ly/decline.png);
            }
            .img-c {
              background-image: url(../assets/images/ly/jian.png);
            }
            span {
              color: rgba(52, 170, 68, 1);
              font-family: Microsoft YaHei;
            }
          }
        }
      }
    }
    // echart
    .echartsData {
      width: 50%;
    }
    .tabData {
      margin: 20px 100px 0px 30px;
      width: 30%;
      .d-nav {
        height: 60px;
        position: relative;
        ul {
          position: absolute;
          top: 30px;
          left: 48%;
          display: flex;
          flex-direction: row;
          li {
            // cursor: pointer;
            list-style: none;
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            background: rgba(234, 237, 243, 1);
            border-radius: 50%;
          }
          .active-li {
            background-color: #0094ff;
          }
        }
      }
      // tab跳转栏
      /deep/ .right-tab {
        .el-tabs__nav-wrap::after {
          display: none;
          /deep/ #tab-0 {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 28px;
            color: rgba(158, 160, 165, 1);
          }
        }
        /deep/ .el-tabs__active-bar {
          width: 30px !important;
          left: 22px;
        }
        .row-1 {
          margin-top: 5px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .col-1 {
          font-size: 14px;
        }
        .col-2 {
          color: #e6492d;
        }
        .fa-arrows {
          position: relative;
          margin-left: 17px;
          .img-a {
            display: block;
            position: absolute;
            top: 1px;
            left: -16px;
            height: 14px;
            width: 14px;
            background-image: url(../assets/images/ly/goup2x.png);
            background-repeat: no-repeat;
            background-position: 0px 0px;
            background-size: 14px;
          }
          .img-b {
            background-image: url(../assets/images/ly/decline.png);
          }
          .img-c {
            background-image: url(../assets/images/ly/jian.png);
          }
          span {
            color: rgba(52, 170, 68, 1);
            font-family: Microsoft YaHei;
          }
        }
        .hr-2 {
          width: 100%;
          border-top: 1px solid rgba(234, 237, 243, 1);
          margin-top: 18px;
          margin-bottom: 18px;
        }
      }
      .data-btm {
        width: 100%;
        position: relative;
        .btn-da {
          position: absolute;
          top: 70px;
          right: 0px;
        }
        .inform {
          margin-top: 18px;
          height: 45px;
          width: 100%;
          border-bottom: 1px solid rgba(234, 237, 243, 1);
          .item {
            width: 80px;
            height: 26px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }
        }
        .infore-data {
          width: 100%;
          margin-top: 25px;
          .blick-ul {
            width: 100%;
            li {
              margin-bottom: 11px;
              img {
                width: 10px;
                height: 10px;
              }
              span {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
              }
            }
          }
          .therr-ul {
            width: 100%;
            margin-top: 20px;
            li {
              color: rgba(158, 160, 165, 1);
              font-size: 13px;
              margin-bottom: 11px;
              img {
                width: 9px;
                height: 9px;
              }
            }
          }
        }
        .work-data {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 30px;
          img {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
          span {
            text-align: center;
            width: 150px;
            height: 30px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(216, 220, 230, 1);
            opacity: 1;
            border-radius: 4px;
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 30px;
            color: rgba(62, 63, 66, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
}
.el-tabs__item {
  font-size: 16px;
}
/* 清除浮动 */
.clearfix:after {
  /* 正常浏览器， 清除浮动*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}
</style>
